<template>
    <div style=" width: 100%;height: 100%;" v-loading="loading" element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
        <div style="height: 92.5%;position: relative; overflow: auto;">
            <div style="display: flex;  align-items: center; width: 100%;">
                <div class="before"></div>
                <div style="width: 99%">城市燃气信息</div>
                <div>
                    <div style="display: flex; align-items: center; justify-content: center; width: 28px; "
                        class="btn_width">
                        <el-button style="width: 28px;height: 28px;" icon="el-icon-refresh-right"
                            @click="reNewDataAction()"></el-button>
                    </div>
                </div>

            </div>

            <div class="titleStyle">
                <div class="inputHorizon" v-for="item in siteEnergyInformation" :key="item.id">
                    <div style="width: 112px;text-align: right;margin-right: 20px;">{{ item.name }}</div>
                    <div class="menExtends" v-if="item.componentType == false" style="width: 56%;">
                        <el-select v-model="item.content" :placeholder="item.placeholder" style="width: 100%;" clearable>
                            <el-option v-for="items in item.data" :key="items.id" :label="items.name" :value="items.id">
                            </el-option>
                        </el-select>
                    </div>

                    <el-input v-if="item.componentType == true" v-model="item.content" :placeholder="item.placeholder"
                        style="width: 56%;" @input="restrictNumericInput(item)" :readonly="item.isForbid"></el-input>
                </div>
            </div>
            <div style="display: flex;  align-items: center; margin-top: 30px;">
                <div class="before"></div>
                <div>管网图(GIS)资料</div>


            </div>
            <div class="titleStyle">
                <div class="inputHorizon" v-for="item in netMapGISMaterial" :key="item.id">
                    <div>{{ item.name }}</div>
                    <div class="menExtends" v-if="item.componentType == false">
                        <el-select v-model="value" placeholder="请选择" style="width: 220px;">
                            <el-option v-for="items in item.data" :key="items.id" :label="items.name" :value="items.id">
                            </el-option>
                        </el-select>
                    </div>

                    <el-input v-if="item.componentType == true" v-model="item.content"
                        style="width: 220px;margin-left: 20px;" clearable @input="restrictNumericInput"
                        :readonly="true"></el-input>

                </div>
            </div>
            <div style="display: flex;flex-wrap: wrap;">
                <div v-for="(item, index) in pipeMapGISInformation" :key="index" class="horizonDIsplay">

                    <div>{{ item.title }}</div>

                    <div style="width: 27%;position: relative;margin-left: 30px;margin-right: 30px;">
                        <el-image v-show="item.imageAddress.length > 0" style="width: 100%; height: 150px;"
                            :src="item.imageAddress[0]" :preview-src-list="item.imageAddress">
                            <div slot="error" class="image-slot">
                                <img src="../../assets/images/stageIcon/加载失败.jpeg" alt=""
                                    style="width: 100%;height: 150px;">
                            </div>
                        </el-image>
                        <img v-show="item.imageAddress.length == 0" src="../../assets/images/stageIcon/暂无图片.png" alt=""
                            style="width: 100%;height: 150px;">
                        <div class="overlay" v-show="item.imageAddress.length > 0">范例图</div>
                    </div>
                    <image-dialog :upAddress="item.upAddress" :imageData="item.imageData" :projectInfo="projectInfo"
                        :id="stageSurveyInfo.id" :dictName="item.dictName" :classNum="1"
                        :sampleImageAll="pipeMapGISInformation" :imageIndex="index" :flieName="item.title"></image-dialog>
             

                </div>
            </div>
        </div>
        <div>
            <el-button class="buttonStyle" @click="submit">保存</el-button>
        </div>
    </div>
</template>
<script>
import {getInfo} from "@/api/project/info";
import { getFileListApi } from "@/api/project/file";
import { updateSurveyApi, getSurveyApi } from "@/api/project/survey";
import ImageDialog from "../OtherOwerUseComponent/ImageDialog.vue";
import { getImage, basicInformation, reViewBasicInformation } from "@/api/project/stageApi";
import minVue from '../Crontab/min.vue';
import loadingDataVue from '../OtherOwerUseComponent/loadingData.vue';
export default {

    props: ['jsonData', 'imageData'],
    watch: {
        // projectInfo: {
        //     handler(newData, oldData) {
        //         ///获取基本信息
        //         this.projectInfo1=newData
        //         this.distrbute()

        //     },
        
        // },

        imageData: {
            handler(newData, oldData) {
                for (var i = 0; i < newData.length; i++) {
                    if (newData[i].fileTreePath.indexOf(this.pipeMapGISInformation[0].upAddress) != -1) {
                        this.pipeMapGISInformation[0].imageData = newData[i].fileList

                    }
                    if (newData[i].fileTreePath.indexOf(this.pipeMapGISInformation[1].upAddress) != -1) {
                        this.pipeMapGISInformation[0].imageData = newData[i].fileList

                    }
                }

            },

        },
    },

    data() {
        return {
            projectInfo:undefined,
            loading: false,
            ////基本信息
            stageSurveyInfo: {},
            pipeMapGISInformation: [
                { title: '中压管网分布图', upAddress: "基本信息/管网图(GIS)资料/中压管网分布图", dictName: 'mediumPressurePipelineNetwork', content: null, imageData: {}, imageAddress: [] },
                { title: '内部管网建设图', upAddress: "基本信息/管网图(GIS)资料/内部管网建设图", dictName: 'internalPipelineNetwork', content: null, imageData: {}, imageAddress: [] }
            ],

            siteEnergyInformation: [
                ///componentType=false显示下拉菜单，为true显示输入框
                {
                    name: '属地公司', id: 1, componentType: false, content: null, dictName: "territorialCompany", placeholder: "温州燃气/温州新奥燃气",fixDictName: '', data: [
                        { name: '温州燃气', id: 1 },
                        { name: '温州新奥燃气', id: 2 },
                    ]
                },
                {
                    name: '非居用户类型', id: 2, componentType: false, content: null, dictName: "feijuUserType",placeholder: "校园/公建单位/医院", fixDictName: '', data: [
                        { name: '校园', id: 1 },
                        { name: '公建单位', id: 2 },
                        { name: '医院', id: 3 },
                    ]
                },
                { name: '单位名称', id: 3, componentType: true, content: 3213, placeholder: "", dictName: '', fixDictName: 'unit', isNumTypeInput: false, isForbid: true },
                { name: '对接人', id: 4, componentType: true, content: null, placeholder: "", dictName: '', fixDictName: 'recepter', isNumTypeInput: false, isForbid: true },
                { name: '部门职位', id: 5, componentType: true, content: null, placeholder: "", dictName: '', fixDictName: 'deptPost', isNumTypeInput: false, isForbid: true },
                { name: '联系电话', id: 6, componentType: true, content: null, placeholder: "", dictName: '', fixDictName: 'phone', isNumTypeInput: true, isForbid: true },
                { name: '建筑年份', id: 7, componentType: true, content: null, placeholder: "请输入", dictName: 'yearBuilt', fixDictName: '', isNumTypeInput: true, isForbid: false },


            ],
            netMapGISMaterial: [
                // { name: '主控阀位置', id: 1, componentType: true, content: '' },
                // { name: '调压柜(箱)位置', id: 2, componentType: true, content: '' },
                // { name: '入建筑位置', id: 3, componentType: true, content: '' },
                // { name: '空间分布位置', id: 4, componentType: true, content: '' },
            ],

            midPressureImagelist: [

            ],
            inNetConstructionMap: [

            ],

            ///加载
            fullscreenLoading: false
        }
    },
    components: {
        ImageDialog,
        loadingDataVue
    }
    ,
    mounted() {
        this.getImage('勘察范例/基本信息/管网图(GIS)资料/中压管网分布图', 1)
        this.getImage('勘察范例/基本信息/管网图(GIS)资料/内部管网建设图', 2)
        const projectId = this.$route.params && this.$route.params.projectId;
        this.getInfo(projectId);
        //  if(this.projectInfo1!=undefined){

            //  this.distrbute()
        //  }
      
    },
    name: "surveyStage",
    methods: {
        //基本信息获取
        getInfo(projectId) {
      getInfo(projectId).then(response => {
        this.projectInfo=response.data
        this.distrbute()
      })
        },
        distrbute() {
            this.loading = true
            getSurveyApi(this.projectInfo.projectId).then(response => {
                this.loading = false
                if (response.code == 200) {
                    this.runMethod(response.data)
                    this.stageSurveyInfo = response.data.stageSurveyInfo


                    for (let i = 0; i < this.siteEnergyInformation.length; i++) {
                        let name = this.siteEnergyInformation[i].fixDictName
                        if (this.projectInfo[name] != null) {
                            this.siteEnergyInformation[i].content = this.projectInfo[name]
                        }

                    }
                }
            })
        },
        reNewDataAction() {
            this.getImage('勘察范例/基本信息/管网图(GIS)资料/中压管网分布图', 1)
            this.getImage('勘察范例/基本信息/管网图(GIS)资料/内部管网建设图', 2)
            this.distrbute()
        },
        isVideoOrImage(url) {
            var videoExtensions = ['mp4', 'mov', 'avi'];
            var imageExtensions = ['jpg', 'png', 'gif'];

            var extension = url.substring(url.lastIndexOf('.') + 1).toLowerCase();


            if (videoExtensions.includes(extension)) {
                return 'video';
            } else if (imageExtensions.includes(extension)) {
                return 'image';
            } else {
                return 'unknown';
            }
        },
        returnVedioFirst(address) {


            if (address != null) {
                let type = this.isVideoOrImage(address)

                if (type == 'video') {
                    return require(`../../assets/images/stageIcon/视频播放.png`)
                }

            }

            return address
        },

        restrictNumericInput(item) {
            const value = item.content;

            // 使用正则表达式验证输入是否为数字
            if (!/^\d*$/.test(value)) {
                // 如果输入不是数字，则移除非数字字符
                if (item.isNumTypeInput == true) {
                    item.content = value.replace(/[^\d]/g, '');
                }

            }
        },
        open() {
            this.$alert('提交基本信息成功', '提交成功', {
                confirmButtonText: '确定',

            });
        },
        submit() {
            this.loading = true
            ///加载中
            ///最外层
            let all = { stageSurveyInfo: {} }



            var stageSurvey = { projectId: this.projectInfo.projectId, id: this.stageSurveyInfo.id }
            for (var i = 0; i < this.siteEnergyInformation.length; i++) {
                if (this.siteEnergyInformation[i].dictName != '') {
                    stageSurvey[this.siteEnergyInformation[i].dictName] = this.siteEnergyInformation[i].content
                }
            }
            all.stageSurveyInfo = stageSurvey

            updateSurveyApi(all).then(response => {
                this.loading = false

                if (response.code == 200) {
                    this.open()
                }
            })
                .catch(error => {
                    this.loading = false
                });
        },
        runMethod(newData) {

            for (let i = 0; i < this.siteEnergyInformation.length; i++) {
                if (this.siteEnergyInformation[i].dictName != null) {
                    if (this.siteEnergyInformation[i].componentType == true) {
                        this.siteEnergyInformation[i].content = newData.stageSurveyInfo[this.siteEnergyInformation[i].dictName]
                    } else {
                        let value = newData.stageSurveyInfo[this.siteEnergyInformation[i].dictName]
                        if (value != null && value != '')
                            this.siteEnergyInformation[i].content = parseInt(newData.stageSurveyInfo[this.siteEnergyInformation[i].dictName])
                    }
                }
            }

        },
        getImage(path, ImageOption) {
            if (ImageOption == 1) {

                this.pipeMapGISInformation[0].imageAddress = []
                getFileListApi(path).then(response => {

                    if (response.code == 200) {

                        if (response.data.length != 0) {
                            Array.from(response.data).forEach(item => {


                                this.pipeMapGISInformation[0].imageAddress.push(item)

                            });

                        }
                    }
                })
            } else if (ImageOption == 2) {
                this.pipeMapGISInformation[1].imageAddress = []
                getFileListApi(path).then(response => {

                    if (response.code == 200) {

                        if (response.data.length != 0) {
                            Array.from(response.data).forEach(item => {


                                this.pipeMapGISInformation[1].imageAddress.push(this.$myGlobalVariable + item)

                            });

                        }
                    }
                })
            }
         
        },
    }
}
</script>
<style>
.buttonStyle {
    float: right;
    margin-top: 0.3%;
    background-color: rgb(24, 144, 255);
    color: white;
}

.before {
    width: 6px;
    height: 6px;
    background-color: rgba(24, 144, 255, 1);
    margin-right: 10px;
}

.titleStyle {

    margin-left: 0px;
    margin-right: 0px;
    display: flex;
    flex-wrap: wrap;
}

.inputHorizon {
    width: 25%;
    display: flex;
    margin-top: 25px;
    justify-content: flex-end;

    align-items: center;
    font-size: 14px;
   
}

.inputStyle {
    margin-left: 20px;
    height: 36px;
    width: 250px;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #DCDFE6;

}

.men {
    margin-left: 20px;
    width: 250px;
    height: 36px;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #DCDFE6;
    line-height: 36px;
}

.options {
    float: right;
    text-align: right;
    width: 240px;
    text-align: center;
}

input::placeholder {
    color: rgba(192, 196, 204, 1);
}


.overlay {
    position: absolute;
    top: 80%;
    left: 0px;
    width: 100%;
    height: 20%;
    background-color: rgba(96,98,102,0.9);
    /* 设置透明度和颜色 */
    text-align: center;

    color: rgba(251, 251, 251, 1);
}
</style>
